let path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin');
let { WebPlugin } = require('web-webpack-plugin');
const webpack = require('webpack');
const BasicPlugin = require('./foo_plugin.js');
const HappyPack = require('happypack');

// loader 不能在指定
// const BasicLoadder = require('./foo_loader.js');

function genEntry() {
    return './src/main.jsx'
}

module.exports = {
    mode: 'development',
    plugins: [
        // new BasicPlugin({
        //     foo: 'bar',
        // }),
        new WebPlugin({
            filename: 'index.html',
            template: './tpl.html',
            requires: ['main'],
        }),
        new CleanWebpackPlugin(['dist']),
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 't1',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['foo_loader'],
            // ... 其它配置项
        }),
    ],
    devtool: 'source-map',
    entry: genEntry(),
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        contentBase: './dist'
    },
    resolveLoader:{
        // 去哪些目录下寻找 Loader，有先后顺序之分
        modules: ['node_modules','./'],
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: ['foo_loader?id=t1'],
            },
            {
                test: /(\.jsx|\.js)$/,
                use: ['babel-loader'],
            },
            {
                test: /\.css/,
                use: ['css-loader'],
            }
        ]
    }
}
